<template>
	<svg class="base-icon" aria-hidden="true" :style="[iconSize]">
		<use :class="fillClass" :xlink:href="symbolId" :fill="color" />
	</svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
	name: 'BaseIcon'
})
const props = defineProps({
	// 显示的 svg 图标名称（剔除 icon-）
	name: {
		type: String,
		required: true
	},
	// 直接指定 svg 图标的颜色
	color: {
		type: String
	},
	// 直接指定 svg 图标的大小
	size: {
		type: [Number, String]
	},
	// 通过 tailwind 指定 svg 颜色的类名
	fillClass: {
		type: String
	}
})
// 真实显示的 svg 图标名（拼接 #icon-）
const symbolId = computed(() => `#icon-2up-${props.name}`)
const iconSize = computed(() => (props.size ? `font-size: ${props.size}px` : ''))
</script>

<style scoped>
.base-icon {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: currentColor;
	overflow: hidden;
}
</style>
